<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>凭证详情</title>
    <link rel="stylesheet" href="../../static/css/element.ui.2.13.2.index.css">
</head>
<body>
<!-- vue实例 div id 设置vue实例名包住 -->
<div id="voucherList">
    <!-- 渲染json schema模板 -->
    <vue-form
            v-model="formData"
            :ui-schema="uiSchema"
            :schema="schema"
    >
        <div slot-scope="{ formData, formRefFn }">
<!--            <el-button @click="consoleLog(formData)" type="primary">确认</el-button>-->
<!--            <el-button @click="consoleLog(formData)" type="primary">取消</el-button>-->
        </div>
    </vue-form>
    <input id="btype" name="btype" th:value="${btype}" hidden="hidden">
    <input id="businessId" name="businessId" th:value="${businessId}" hidden="hidden">
</div>
</body>
<script src="../../static/js/polyfill.umd.min.0.0.1.js"></script>
<script src="../../static/js/vue.2.6.12.js"></script>
<script src="../../static/js/element.ui.index.2.13.2.js"></script>
<script src="../../static/js/vueJsonSchemaForm.umd.1.2.0.min.js"></script>
<script src="../../static/js/axios.0.18.0.min.js"></script>
<script th:inline="javascript">
    // vue实例
    var vm = new Vue({
        // 实例名
        el: '#voucherList',
        // 定义数据字段
        data(){
            return {
                    // json 模板
                    schema: {

                    },
                    // 表单布局
                    formFooter: {

                    },
                    // 表单属性
                    formProps: {

                    },
                    // 表单ui
                    uiSchema: {

                    },

                    // 表单数据
                    formData: {

                    },

                    btype:"",           // 模板名称
                    businessId:"",      // 业务id
                }
            },
        // 初始化钩子
        mounted() {
            this.queryTemplateBtype();
        },
            methods: {
                // 拿到模板数据
                queryTemplateBtype(){
                    var vue = this;
                    let btype = document.getElementById("btype");
                    vue.btype = btype.value;
                    var p = axios.get("/block/info/schema",{params:{templateBtype:vue.btype}})
                    p.then(function (result) {
                        if (result.data.code === 200) {
                            if(result.data.data.schema){
                                vue.schema = result.data.data.schema;
                            }
                            if(result.data.data.formFooter){
                                vue.formFooter = result.data.data.formFooter;
                            }
                            if(result.data.data.formProps){
                                vue.formProps = result.data.data.formProps;
                            }
                            if(result.data.data.uiSchema){
                                vue.uiSchema = result.data.data.uiSchema;
                            }
                            vue.queryTemplateDataByBusinessId();
                        } else {
                            vue.schema = {};
                        }
                    }).catch(function (error) {
                        console.log(error)
                    })
                },

                // 拿到数据
                queryTemplateDataByBusinessId(){
                    var vue = this;
                    let businessId = document.getElementById("businessId");
                    vue.businessId = businessId.value;
                    var p = axios.get("/block/info/data",{params:{id:vue.businessId}})
                    p.then(function (result) {
                        if(result.data.code === 200){
                            vue.formData = result.data.data
                        }else{
                            vue.formData = {};
                        }
                    }).catch(function (error) {

                    })
                },

                consoleLog(consoleLog){
                    console.log(consoleLog)
                }
            }
    });
</script>
</html>
